<template>
  <div class="body_bgi full p_10 relative">
    <bigscreen-header headerName="活动列表" />

    <div class="w_full flex_row_center absolute top_200 left_center gap_10">
      <div 
        class="w_30_p h_250 relative border_radius_20" 
        :class="formatBgc(index)"
        v-for="(item, index) in roomList" :key="index" 
      >
        <div class="w_full h_30 flex_row_between p_10">
          <div class="fs_20 color_fff">{{ item.id }}号房间</div>
          
          <div class="h_25 lh_18 color_fff bgc_0000004c p_3 border_radius_5" v-if="item.isFinished == 0">{{ formatRoomState(item.isFinished) }}</div>
          <div class="h_25 lh_18 color_fff bgc_0000004c p_3 border_radius_5" v-if="item.isFinished == 1">{{ formatRoomState(item.isFinished) }}</div>
          <div class="h_25 lh_18 color_fff bgc_0000004c p_3 border_radius_5" v-if="item.isFinished == 2">{{ formatRoomState(item.isFinished) }}</div>
        </div>

        <div class="w_full h_60 cursor flex_row_between absolute_center" @click="goToPage(item)">
          <!-- <div class="full "></div> -->
          <div class="w_65_p h_60 lh_55 text_right fs_3vw ls_2 fw_bold main_text font_zh">{{ item.contestName }}</div>
          <div class="w_35_p pl_10 fs_1_5vw pt_20 main_text font_zh">比赛</div>
        </div>

        <!-- 剪羊毛 比赛 随机分配羊 -->
        <div class="w_full flex_row_end gap_10 absolute bottom_10 right_10 z_999 cursor color_fff">
          <div 
            class="w_80 text_center bgc_0000004c p_3 border_radius_5" 
            v-if="item.isType == 1 && item.isFinished == 0"
            @click="goToPath(`/random-allocation-sheep`)">随机分配
          </div>

          <div 
            class="w_80 text_center bgc_0000004c p_3 border_radius_5" 
            v-if="item.isType == 1 && item.isFinished == 2"
            @click="goToPath(`/person-sort/${item.contestId}`)">最终排名
          </div>
        </div>

        <div class="w_full flex_row_end gap_10 absolute bottom_10 right_10 z_999 cursor color_fff">
          <!-- <div 
            class="w_80 text_center bgc_0000004c p_3 border_radius_5" 
            v-if="item.isType == 0 && item.isFinished == 2"
            @click="goToPath(`/sheep-sort/${item.contestId}/${item.contestName}/null`)">实时排名
          </div> -->

          <div 
            class="w_80 text_center bgc_0000004c p_3 border_radius_5" 
            v-if="item.isType == 0 && item.isFinished == 2"
            @click="goToPath(`/activity-ranking/${item.contestId}/${item.contestName}`)">最终排名
          </div>
        </div>
      </div>
    </div>

    <bigscreen-footer />
  </div>
</template>

<script>
  import { getContestList, getRoomList } from '@/api/index.js'
  import BigscreenHeader from '@/components/Header.vue'
  import BigscreenFooter from '@/components/Footer.vue'

  export default {
    name: 'SelectRoom',
    components: { BigscreenHeader, BigscreenFooter },
    data() {
      return {
        contestList: [],

        roomList: [],
      }
    },
    async mounted() {
      // 判断登录
      this.judgeLogin()
       
      // 获取 房间 列表
      this.getRoomList()     
    },
    methods: {
      judgeLogin() {
        let token = window.sessionStorage.getItem('token')

        if (!token) {
          this.$message({
            message: '请登录！',
            type: 'warning'
          });

          this.$router.push('/login')
        }
      },

      // 获取 活动 列表
      async getContestList() {
        let res = await getContestList()
        try { 
          if (res.code == 1000) {
            this.contestList = res.data
          }
        } catch (err) {
          console.log('获取活动列表失败 : ', err);
        }
      },

      // 获取 房间列表
      async getRoomList() {
        let res = await getRoomList()
        try {
          if (res.code == 1000) {
            let sortdict = {
              "1": 1,
              "0": 2,
              "2": 3
            }

            this.roomList = res.data.sort((a, b) => sortdict[a.isFinished] - sortdict[b.isFinished])
          }
        } catch(err) {
          console.log('获取房间列表失败 : ', err);
        }
      },

      // 格式化 房间状态
      formatRoomState(val) {
        let result = ''
        if (val == 0) {
          result = '未开始'
        } else if (val == 1) {
          result = '进行中'
        } else {
          result = '已结束'
        }

        return result
      },

      goToPage(item) {
        if (item.isFinished == 0) {
          this.$message({
            message: '活动未开始！',
            type: 'warning'
          });
          return false
        }

        if (item.isFinished == 2) {
          this.$message({
            message: '活动已结束！',
            type: 'danger'
          });
          return false
        }

        window.sessionStorage.setItem('roomId', item.id)

        let path = ''
        if (item.isType == 0) {
          path = `/sheep-score/${item.id}/${item.contestId}/${item.contestName}`
        } else {
          path = `/person-sort/${item.contestId}`
        }
        this.$router.push(path)
      },

      goToPath(path) {
        this.$router.push(path)
      },

      // 格式化 背景颜色
      formatBgc(val) {
        let bgc = ''
        if (val == 0) {
          bgc = 'bgc_1'
        } else if (val == 1) {
          bgc = 'bgc_2'
        } else if (val == 2) {
          bgc = 'bgc_3'
        } else {
          bgc = ''
        }

        return bgc
      }
    }
  }
</script>

<style>
  .bgc_1 { background-image: url('~@/assets/image/room1.png'); }
  .bgc_2 { background-image: url('~@/assets/image/room2.png'); }
  .bgc_3 { background-image: url('~@/assets/image/room3.png'); }
</style>